lib components / Text

External HTML

Allow users to read externally supplied HTML content with correct and consistent typographic styling

Examples Properties Guidelines Notable Changes

import { ExternalHtml } from "@siteimprove/fancylib";

#Examples

In some cases, such as when using translation keys, it can be technically difficult or impossible to use our typography components (e.g. headings, paragraphs, or links). Instead, regular HTML elements are used, such as <h1>, <Paragraph>, or <a>. By wrapping these HTML elements in the external HTML element, they will automatically receive the same styling as that our our typography components.

#Default

Here you can see an example of how the external HTML component applies the same styling to a <Paragraph> with an <a> inside it, as that of our paragraph and link components.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet ullamcorper nunc ullamcorper fermentum. Curabitur accumsan nunc vitae pharetra dictum. Proin eu ante vel sem lobortis varius at id enim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur dolor mus.

CodeHTML output

Theme: agentic-ai-2025

<ExternalHtml>
	{`
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet ullamcorper nunc ullamcorper fermentum.
	Curabitur accumsan nunc vitae pharetra dictum. Proin eu ante vel sem lobortis varius at id enim.
	Orci varius natoque penatibus et magnis dis parturient montes, <a href="#default">nascetur dolor mus</a>.
	</p>
	`}
</ExternalHtml>

#Properties

CodePropsHTML output

Theme: agentic-ai-2025

Property	Description	Defined
childrenRequired	`string`HTML string that is rendered with the styling of fancy typography components	YesNo
data-observe-keyOptional	`string`Unique string, used by external script e.g. for event tracking	YesNo
data-componentOptional	`string`Name of the component. Should only be set by components since it needs to stable. Used to track component usage	YesNo
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo
styleOptional	`object`Style object to apply custom inline styles (only intended for special cases)	YesNo

#Guidelines

#Best practices

Use when it’s technically challenging or impossible to use our typographic components (paragraph, heading, list, etc.)
When the external HTML component contains multiple block-level HTML elements (e.g. an <Header.h3> and a <p>), wrap it in a text container component. The text container component will automatically add the correct spacing between the typographic elements.

#Do not use when

Using our typographic components (paragraph, heading, list, etc.) presents no technical challenges.

#Accessibility

This component comes with built-in accessibility, no extra work required. However, be aware that the accessibility guidelines for our typography components, such as paragraph, heading, and link, also apply to their HTML counterparts used inside the external HTML component.

Explore detailed guidelines for this component: Accessibility Specifications